<?php
  if(!empty($_POST)) {
    require_once '../Controller/ReceitaController.php';

    $receitaController = new ReceitaController();

    $receitas = $receitaController->buscarReceitaPorIngredientes($_POST); 
  }
?>
<!DOCTYPE html>
<html lang="en">
  <?php require_once 'Header.php'; ?>
  <body>
    <?php require_once 'Menu.php'; ?>
    <div>

      <div class="body">

        <form action="BuscarReceita.php" class="navbar-form form-search" role="form" method="POST">
          <div class="form-group form-search">
            <input type="text" id="ingredientes_receita" name="ingredientes_receita" placeholder="Ingredientes (separar por ;)" class="form-control search">
            <button type="submit" class="btn btn-default">Pesquisar</button>
          </div>
        </form>

        <div class="lista-receitas">
          <?php  
            if (!empty($receitas) && count($receitas) != 0) :
              foreach ($receitas as $receita) {
          ?>
          <div class="card-receita">
            <img data-src="holder.js/200x200" class="img-thumbnail imagem-receita" alt="200x200" 
              src="<?php echo empty($receita['foto_da_receita']) ? 'img/indisponivel.gif' : $receita['foto_da_receita']; ?>" data-holder-rendered="true" style="width: 200px; height: 200px;">
            <h1 class="receita">
              <span class="label label-info info-receita"><?php echo $receita['titulo_receita']; ?></span>
              <span class="label label-info info-receita">Tempo: <?php echo $receita['tempo_de_preparo_receita']; ?></span>
              <span class="label label-info info-receita">Rendimento: <?php echo $receita['rendimento_por_porcao']; ?></span>
            </h1>
          </div>
          <?php 

              }
            else:
          ?>
          <div style="text-align: center;">
            <?php if($_POST) echo "Nenhuma receita encontrada"; ?>
          </div>
          <?php

            endif;
          ?>
    </div>
    <script src="js/jquery-1.11.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/selectize.min.js"></script>

    <script type="text/javascript">
      $(".search").selectize({
        delimiter: ";",
        maxItems: null,
        persist: false,
        create: function(input) {
          return {
            value: input,
            text: input
          }
        }
      });
    </script>
  </body>
</html>